<template>
  <div class="container">
    <el-button type="primary" @click="previewTemp">预览</el-button>
    <el-button type="success" @click="handleZoom(1)">放大</el-button>
    <el-button type="warning" @click="handleZoom(-1)">缩小</el-button>
    <div class="chart-preview">
      <div style="clear: both;"></div>
      <div class="view-canvas">
        <div
          id="container"
          :style="{ width: 100 * scale + '%', height: 100 * scale + '%' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import BpmnViewer from 'bpmn-js/lib/Viewer';

export default {
  data() {
    return {
      containerEl: null,
      bpmnModeler: null,
      scale: 1,
      currentCanvasXml: '<?xml version="1.0" encoding="UTF-8"?>\n' +
        '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="Definitions_0001" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
        '  <bpmn:process id="Process_1700547729643" name="业务流程_1700547729643" isExecutable="true">\n' +
        '    <bpmn:startEvent id="Event_1hrs4ql">\n' +
        '      <bpmn:outgoing>Flow_1t27wr1</bpmn:outgoing>\n' +
        '    </bpmn:startEvent>\n' +
        '    <bpmn:sequenceFlow id="Flow_1t27wr1" sourceRef="Event_1hrs4ql" targetRef="Activity_0aia15b" />\n' +
        '    <bpmn:sequenceFlow id="Flow_00a816j" sourceRef="Activity_0aia15b" targetRef="Activity_0p2ku4k" />\n' +
        '    <bpmn:sequenceFlow id="Flow_1c0ipap" sourceRef="Activity_0p2ku4k" targetRef="Activity_1jakk73" />\n' +
        '    <bpmn:endEvent id="Event_1pkdced">\n' +
        '      <bpmn:incoming>Flow_0nmfatv</bpmn:incoming>\n' +
        '    </bpmn:endEvent>\n' +
        '    <bpmn:sequenceFlow id="Flow_0nmfatv" sourceRef="Activity_1jakk73" targetRef="Event_1pkdced" />\n' +
        '    <bpmn:userTask id="Activity_0aia15b" name="申请人">\n' +
        '      <bpmn:extensionElements>\n' +
        '        <camunda:properties>\n' +
        '          <camunda:property name="111" value="1231" />\n' +
        '        </camunda:properties>\n' +
        '      </bpmn:extensionElements>\n' +
        '      <bpmn:incoming>Flow_1t27wr1</bpmn:incoming>\n' +
        '      <bpmn:outgoing>Flow_00a816j</bpmn:outgoing>\n' +
        '    </bpmn:userTask>\n' +
        '    <bpmn:userTask id="Activity_0p2ku4k" name="组长">\n' +
        '      <bpmn:extensionElements>\n' +
        '        <camunda:properties>\n' +
        '          <camunda:property name="111" value="1231" />\n' +
        '        </camunda:properties>\n' +
        '      </bpmn:extensionElements>\n' +
        '      <bpmn:incoming>Flow_00a816j</bpmn:incoming>\n' +
        '      <bpmn:outgoing>Flow_1c0ipap</bpmn:outgoing>\n' +
        '    </bpmn:userTask>\n' +
        '    <bpmn:userTask id="Activity_1jakk73" name="经理">\n' +
        '      <bpmn:extensionElements>\n' +
        '        <camunda:properties>\n' +
        '          <camunda:property name="111" value="1231" />\n' +
        '        </camunda:properties>\n' +
        '      </bpmn:extensionElements>\n' +
        '      <bpmn:incoming>Flow_1c0ipap</bpmn:incoming>\n' +
        '      <bpmn:outgoing>Flow_0nmfatv</bpmn:outgoing>\n' +
        '    </bpmn:userTask>\n' +
        '  </bpmn:process>\n' +
        '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
        '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1700547729643">\n' +
        '      <bpmndi:BPMNShape id="Event_1hrs4ql_di" bpmnElement="Event_1hrs4ql">\n' +
        '        <dc:Bounds x="152" y="332" width="36" height="36" />\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNShape id="Event_1pkdced_di" bpmnElement="Event_1pkdced">\n' +
        '        <dc:Bounds x="948" y="332" width="36" height="36" />\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNShape id="Activity_13g3a2f_di" bpmnElement="Activity_0aia15b">\n' +
        '        <dc:Bounds x="288" y="290" width="120" height="120" />\n' +
        '        <bpmndi:BPMNLabel />\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNShape id="Activity_18ilz6a_di" bpmnElement="Activity_0p2ku4k">\n' +
        '        <dc:Bounds x="508" y="290" width="120" height="120" />\n' +
        '        <bpmndi:BPMNLabel />\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNShape id="Activity_1b7651o_di" bpmnElement="Activity_1jakk73">\n' +
        '        <dc:Bounds x="728" y="290" width="120" height="120" />\n' +
        '        <bpmndi:BPMNLabel />\n' +
        '      </bpmndi:BPMNShape>\n' +
        '      <bpmndi:BPMNEdge id="Flow_1t27wr1_di" bpmnElement="Flow_1t27wr1">\n' +
        '        <di:waypoint x="188" y="350" />\n' +
        '        <di:waypoint x="288" y="350" />\n' +
        '      </bpmndi:BPMNEdge>\n' +
        '      <bpmndi:BPMNEdge id="Flow_00a816j_di" bpmnElement="Flow_00a816j">\n' +
        '        <di:waypoint x="408" y="350" />\n' +
        '        <di:waypoint x="508" y="350" />\n' +
        '      </bpmndi:BPMNEdge>\n' +
        '      <bpmndi:BPMNEdge id="Flow_1c0ipap_di" bpmnElement="Flow_1c0ipap">\n' +
        '        <di:waypoint x="628" y="350" />\n' +
        '        <di:waypoint x="728" y="350" />\n' +
        '      </bpmndi:BPMNEdge>\n' +
        '      <bpmndi:BPMNEdge id="Flow_0nmfatv_di" bpmnElement="Flow_0nmfatv">\n' +
        '        <di:waypoint x="848" y="350" />\n' +
        '        <di:waypoint x="948" y="350" />\n' +
        '      </bpmndi:BPMNEdge>\n' +
        '    </bpmndi:BPMNPlane>\n' +
        '  </bpmndi:BPMNDiagram>\n' +
        '</bpmn:definitions>\n',
    };
  },
  methods: {
    handleZoom(flag) {
      if (flag < 0 && this.scale <= 1) {
        return;
      }
      this.scale += flag;
      this.$nextTick(() => {
        this.bpmnModeler.get('canvas').zoom('fit-viewport');
      });
    },
    previewTemp() {
      this.containerEl = document.getElementById('container');
      this.bpmnModeler && this.bpmnModeler.destroy();
      this.scale = 1;
      this.bpmnModeler = new BpmnViewer({ container: this.containerEl });
      const viewer = this.bpmnModeler;
      this.bpmnModeler.importXML(this.currentCanvasXml, (err) => {
        if (err) {
          console.error(err);
        } else {
          const canvas = viewer.get('canvas');
          canvas.zoom('fit-viewport');

          // canvas.addMarker("Activity_0p2ku4k","redTask")



          const eventBus = this.bpmnModeler.get('eventBus');
          const overlays = this.bpmnModeler.get('overlays');
          eventBus.on('element.hover', (e) => {
            console.log(e.element.type)
            if (e.element.type === 'bpmn:Task'||e.element.type === 'bpmn:UserTask') {
              const overlayHtml = `<div class="tipBox">你好，我是悬浮框里的内容</div>`;
              overlays.add(e.element.id, {
                position: { top: e.element.height, left: 0 },
                html: overlayHtml,
              });
            }
          });

          eventBus.on('element.out', () => {
            overlays.clear();
          });
        }


      });
    },
  },
};
</script>

<style lang="scss">
.container {
  .tipBox {
    width: 200px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    padding: 12px;
  }
}
.redTask {
  fill: red !important;
  stroke: red!important;
  fill-opacity: 0.2!important;
}

.redTask.djs-shape .djs-visual > * {
  fill: red!important;
  stroke: red!important;
  fill-opacity: 0.2!important;
}

.redTask.djs-shape .djs-visual > path {
  fill: red!important;
  fill-opacity: 0.2!important;
  stroke: red!important;
}

.redTask:not(.djs-connection) .djs-visual > * {
  fill: red!important; /* color elements as green */
}
</style>
